<template>
  <HeadContainer :title="$t('title.verifyInfo')" @back="back()">
    <div class="gap-col-16">
      <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 gap-col-16">
        <div>
          {{ $t('document.creator.verify.info1') }}{{ $t(profileText) }}{{ $t('document.creator.verify.info2') }}
        </div>
        <div class="number text-graydisabled">
          <li>
            {{ $t('document.creator.verify.point1.info') }}
            <ul class="pl-4 alpha">
              <li>
                {{ $t('document.creator.verify.point1.pointA')
                }}<span class="text-primary">{{ $t('document.creator.verify.point1.pointAtip') }}</span>
              </li>
              <div class="d-flex items-center justify-center py-4 ml-32">
                <img src="@/assets/images/id-info-photo.png" alt="ID info photo" title="ID info photo" />
              </div>
              <li>{{ $t('document.creator.verify.point1.pointB') }}</li>
              <div class="d-flex items-center justify-center py-4 ml-32">
                <img
                  src="@/assets/images/id-info-user-face.png"
                  alt="Holding ID info photo with your face"
                  title="Holding ID info photo with your face"
                />
              </div>
            </ul>
          </li>
          <li>
            {{ $t('document.creator.verify.point2.info') }}
            <ul class="pl-4 alpha">
              <li>{{ $t('document.creator.verify.point2.pointA') }}</li>
              <li>{{ $t('document.creator.verify.point2.pointB') }}</li>
              <li>{{ $t('document.creator.verify.point2.pointC') }}</li>
            </ul>
          </li>
          <li>{{ $t('document.creator.verify.point3') }}</li>
          <li>{{ $t('document.creator.verify.point4') }}</li>
        </div>
      </div>
      <div
        class="contact gap-col-16 text-white font-size-14 font-styl-normal font-weight-400 line-height-140 letter-spacing-dot2"
      >
        <div>{{ $t('document.creator.tip.line1') }}</div>
        <div>
          {{ $t('document.creator.tip.line2') }}
          <span class="text-primary">support@fantasi.one</span>
          {{ $t('document.creator.tip.line3') }}
        </div>
      </div>
      <v-divider></v-divider>
      <BlockButton
        :label="$t('label.startTakePicture')"
        :is-gradient="false"
        @click="to(BECOME_CREATOR_ROUTES.UPLOAD_IDENTITY)"
      ></BlockButton>
    </div>
  </HeadContainer>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useBecomeCreatorDataStore } from '@/store/become-creator-data'
import { useBecomeCreatorRouteStore } from '@/store/become-creator-route'
import { $t } from '@/i18n'
import BlockButton from '@/components/button/BlockButton.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { BECOME_CREATOR_ROUTES, CREDENTAIL_TYPE } from '@/constant'

const routeStore = useBecomeCreatorRouteStore()
const { to, back } = routeStore

const dataStore = useBecomeCreatorDataStore()
const { profile } = storeToRefs(dataStore)
const profileText = computed(() => {
  return profile.value.identityType === CREDENTAIL_TYPE.PASSPORT
    ? 'identity.passport'
    : profile.value.identityType === CREDENTAIL_TYPE.IDENTITY_CARD
    ? 'identity.idCard'
    : 'identity.driverLicense'
})
</script>
<style scoped lang="scss">
ul.alpha {
  list-style-type: lower-alpha;
  margin-left: 1rem;
}

.number {
  list-style-type: decimal;

  > li {
    margin-bottom: 0.5rem;
  }
}

.contact {
  width: 100%;
  padding: 1rem 1rem 0.9375rem 1rem;
  border-radius: 0.625rem;
  background: #333546;
}

.ml-32 {
  margin-left: -2rem;
}
</style>
